<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- q.点击登录，判断用户的用户名和密码长度
    2.提交数据和服务器通信
    3.提示信息 -->
    <div class="login">
        <div class="login-container">
            <h2>欢迎登录</h2>
            <div class="form_warp">
                <form>
                <label for="username" class="form-label">用户名:</label>
                <input type="text" id="username"  placeholder="请输入用户名" required><br>
                <label for="password" class="form-control password">密码:</label>
                <input type="password" id="password"  placeholder="请输入密码" required><br>
                <button type="button" class="btn btn-primary btn-login">登录</button>
            </form>
        </div>
    </div>
</div>
    <script  src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script>
          const myalter=ducument.querySelector('alter')
          function alterFn(msg,isSucccess){
            myalter.classList.add('show')
            // 显示和隐藏
            //完善颜色
            myAlter.innerText=msg
            const bgStyle=isSucccess?'alter-success':'alter-danger'
            myAlter.classList.add(bgStyle)
            setTimeout(()=>{ 
        // 提示框：
        // 点击登录之后判断用户名和密码的长度，
        // 使用提示框然后发聩提示信息
        // 封装函数
        // {显示提示框 不同提示文字msg 过两秒自动消失 true成功绿色，false失败蓝色
                myAlter.classList.remove('show')
                myAlter.classList.remove('bgStyle')
            },2000)
          }
        document.querySelector('.btn-login').addEventListener('click',()=>{
            const username=document.querySelector('.username').value
            const password=document.querySelector('.password').value
            //判断长度
            if(username.length<8){
                alterFn('用户名必须大于等于八位',false)
                console.log('用户名必须大于等于八位')
                return
            }
            // console.log('提交数据到服务器')
            if(password.length<6){
                alterFn('密码必须大于等于八位',false)
                console.log('密码必须大于等于八位')
                return
            }
            //讲用户名和密码提交给服务器
            axios({
                url:'http://hmajax.itheima.net/api/login',
                method:'POST',
                data:{
                    username,
                    password
                }
            }).then(result=>{
                alterFn('result.data.message',true)
                console.log(result)
                console.log(result.data.message)
         //返回错误信息
            }).catch(error=>{
                alterFn('error.response.data.messag',false)
                console.log(error.response.data.message)
            })
        })
    </script>
    </body>
</html>